import { CloseOne, CollapseTextInput, ExpandTextInput, Pin, Pushpin, ReduceOne } from '@icon-park/react'
import { Col, Row, Tooltip } from 'antd'
import { useEffect, useState } from 'react'
import { useLocation } from 'react-router'

export default function TitleBar() {
  const [isPinned, setIsPinned] = useState(false)
  const [isExpanded, setIsExpanded] = useState(false)
  const [title, setTitle] = useState('星蘅工具箱')
  const location = useLocation()
  useEffect(() => {
    // 根据路由路径设置标题
    switch (location.pathname) {
      case '/':
        setTitle('设备信息')
        break
      case '/program':
        setTitle('编程环境')
        break
      default:
        setTitle('星蘅工具箱')
        break
    }
  }, [location])
  const handlePinClick = () => {
    if (isPinned) {
      setIsPinned(false)
      // 取消置顶
      window.api.cancelTopWindow()
    } else {
      setIsPinned(true)
      // 置顶
      window.api.topWindow()
    }
  }

  const handleExpandClick = () => {
    if (isExpanded) {
      setIsExpanded(false)
      // 还原
      window.api.restoreWindow()
    } else {
      setIsExpanded(true)
      // 放大
      window.api.maximizeWindow()
    }
  }

  return (
    <>
      <Row className="drag">
        <Col span={5}>
          <div className="ml-2 font-bold">{title}</div>
        </Col>
        <Col className="hover:bg-[#E7E7E7] no-drag" span={1} offset={15}>
          <Tooltip title={isPinned ? '取消置顶' : '置顶'}>
            <div className="w-full h-full flex justify-center items-center" onClick={handlePinClick}>
              {isPinned ? (
                <Pushpin theme="filled" size="24" fill="#333" />
              ) : (
                <Pin theme="outline" size="24" fill="#333" />
              )}
            </div>
          </Tooltip>
        </Col>
        <Col className="hover:bg-[#E7E7E7] no-drag" span={1}>
          <Tooltip title="最小化">
            <div className="w-full h-full flex justify-center items-center" onClick={() => window.api.minimizeWindow()}>
              <ReduceOne theme="outline" size="24" fill="#333" />
            </div>
          </Tooltip>
        </Col>
        <Col className="hover:bg-[#E7E7E7] no-drag" span={1}>
          <Tooltip title={isExpanded ? '还原' : '全屏'}>
            <div className="w-full h-full flex justify-center items-center" onClick={handleExpandClick}>
              {isExpanded ? (
                <CollapseTextInput theme="filled" size="24" fill="#333" />
              ) : (
                <ExpandTextInput theme="outline" size="24" fill="#333" />
              )}
            </div>
          </Tooltip>
        </Col>
        <Col className="hover:bg-[#ED4C4C] rounded-tr-lg no-drag" span={1}>
          <div className="w-full h-full flex justify-center items-center" onClick={() => window.api.closeWindow()}>
            <CloseOne theme="outline" size="24" fill="#333" />
          </div>
        </Col>
      </Row>
    </>
  )
}
